<template>
  <div class='u-course_signUp_selectSkuDialog m-courseSignUp_dialog'>
    <el-dialog ref='dialog'
      title="选择 Sku"
      :visible.sync="dialogVisible"
      :before-close="() => {this.dialogVisible = false}"
    >
      <!-- table -->
      <el-table ref='singleTable' class="table" :data="data" border @current-change='handleCurrentChange' 
         style='width: 100%' highlight-current-row>
         <el-table-column align='center' property='name' label='课程名称' />
         <el-table-column align='center' property='title' label='所属分类' min-width='150' />
      </el-table>

      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='5'></pagination>
      </div>
      <div class="btnWrap">
        <el-button type='primary' @click='confirm'>确定</el-button><el-button @click='hide'>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'u-course_signUp_selectSkuDialog',

  components: {
  },

  props: {
    data: {
      default: []
    }
  },

  data() {
    return {
      dialogVisible: false,
      name: '',
      currentRow: {}
    }
  },

  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
      console.log(val)
    },

    async fetchData(aPageNum, aPageSize) {
      const params = {
        aPageNum,
        aPageSize,
        aGoodsType: 1,
        aMerchantId: this.aFirmId
      }
      const name = this.name
      params.aAttrs = this.$refs.attrSearch.getData()
      if (name || name === 0) params.aName = name
      return this.$api.supplyGetMines(params)
    },

    getData(data) {
      this.data = data
    },

    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.data.length <= 0) {
          this.$refs.page.changePage()
        }
      })
    },

    hide() {
      this.dialogVisible = false
    },

    confirm() {
      this.dialogVisible = false
      this.$emit('getData', this.currentRow.aSkuId)
    }
  }
}
</script>

<style lang='less'>
.u-course_signUp_selectSkuDialog {}
</style>